<template>
    <div class='detail'>
        <div class="banner">
            <img :src="detailData.image" alt="">
        </div>
        <div class="title">
            {{detailData.title}}
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')"/>
            <van-goods-action-icon icon="shop-o" text="店铺" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addToCartFun(detailData.id)"/>
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import user from '../store/user';
export default {
    name:"detail",
   data(){
       return {
           detailData:{},
       }
   },
   created(){
       this.id=this.$route.params.id;
       this.getShopDetail(this.id)
   },
   computed: {
        ...mapState('user', ['userData'])
    },
   methods:{
       getShopDetail(id){
           this.$api.getShopDetail(id).then(res=>{
               console.log(res)
                if(res.code === 1){
                    this.detailData = res.data[0]
                    console.log(this.detailData)
                }
            })
       },
       // 加入购物车
        addToCartFun(id){
            this.$api.addToCart({
                user_id:this.userData.id,
                shop_id:id
            }).then(res=>{
                if(res.code===1) {
                    // 
                    console.log('添加成功')
                }else {
                    console.log('添加失败')
                }
                console.log(this.userData.id)
            })
        }
   }

}
</script>
<style lang="stylus" scoped>

</style>